<template>
  <div class="custom-tab">
    <div
      v-for="(item, index) in menuList"
      :key="index"
      class="tab-item"
      :class="{
        'm-active': route === item.path,
        'scroll-top': route === item.path && scrollTop > 100,
      }"
      @click="switchTab(item.path)"
    >
      <div class="menu">
        <image :src="`/static/tabbar/${item.icon}-active.png`" class="tab-icon m-active" />
        <image :src="`/static/tabbar/${item.icon}.png`" class="tab-icon" />
        <div class="tab-label">{{ item.name }}</div>
      </div>
      <div class="top" @click="scrollTopFun()">
        <image src="/static/tabbar/to-top.png" class="tab-icon m-active" />
        <div class="tab-label">回顶部</div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'TabBar',
  props: {
    zIndex: {
      type: [Number, String],
    },
    scrollTop: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      route: '',
      menuList: [
        {
          name: '首页',
          icon: 'home',
          path: 'pages/home/index/index',
        },
        {
          name: '收藏',
          icon: 'collect',
          path: 'pages/collect/index',
        },
        {
          name: '订单',
          icon: 'order',
          path: 'pages/order/index',
        },
        {
          name: '我的',
          icon: 'my',
          path: 'pages/my/index',
        },
      ],
    }
  },
  created() {
    // #ifndef MP
    uni.hideTabBar()
    // #endif
    // 获取当前页面栈数组
    const pages = getCurrentPages()
    const currentPage = pages[pages.length - 1]
    this.route = currentPage.route
  },
  methods: {
    switchTab(url) {
      // 过滤重复点击当前tab
      if (url.includes(this.route)) {
        return
      }
      // 保证关闭picker后再跳转页面
      uni.switchTab({
        url: `/${url}`,
      })
    },
    scrollTopFun(duration = 300) {
      uni.pageScrollTo({
        scrollTop: 0,
        duration,
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.custom-tab {
  position: fixed;
  right: 38rpx;
  bottom: 38rpx;
  // bottom: calc(constant(safe-area-inset-bottom) + 38rpx);
  // bottom: calc(env(safe-area-inset-bottom) + 38rpx);
  left: 38rpx;
  z-index: 50;
  box-sizing: border-box;
  display: flex;
  height: 120rpx;
  padding: 0 20rpx;
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(20px);
  border-radius: 60rpx;
  box-shadow: 0px 11.54px 23.08px rgba(0, 0, 0, 0.1);

  .tab-item {
    position: relative;
    flex: 1;
    height: 100%;
    overflow: hidden;
    font-size: 20rpx;
    line-height: 23rpx;
    color: var(--color4);

    .tab-icon {
      display: inline-block;
      width: 60rpx;
      height: 60rpx;
      margin-bottom: 4rpx;
    }

    .tab-icon.m-active {
      display: none;
    }

    &.m-active {
      .tab-icon {
        display: none;
      }

      .tab-icon.m-active {
        display: block;
      }

      .tab-label {
        color: var(--color1);
      }
    }

    .menu,
    .top {
      position: absolute;
      top: 0;
      left: 0;
      display: inline-flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 120rpx;
      text-align: center;
      transition: top 0.3s;
    }
    .top {
      top: 100%;
    }

    &.scroll-top {
      .menu {
        top: -100%;
      }
      .top {
        top: 0%;
      }
    }
  }
}
</style>
